<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="SBL history"
    width="60%">
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <pagination
      :page.sync="listQuery.page"
      :size.sync="listQuery.size"
      :total="total"
      @pagination="onChangePage"
    />
  </el-dialog>
</template>

<script>
import { getActionHisList } from '@/api/ruleConfig/SBLSetting'
export default {
  name: 'SBLHistoryTable',
  data() {
    const editType = {
      1: '新增',
      2: '修改',
      3: '删除'
    }
    return {
      dialogVisible: false,
      tableData: [],
      tableColumns: [
        { prop: 'parmName', label: this.$t('parameterName') },
        { prop: 'editNote', label: 'Note' },
        { prop: 'editType', label: this.$t('actionType'), templete: (_scope) => {
          return (
            <span>{editType[_scope.row.editType]}</span>
          )
        } },
        { prop: 'editor', label: this.$t('operator') },
        { prop: 'editTime', label: this.$t('operatingTime') }
      ],
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      },
      sblId: ''
    }
  },
  methods: {
    handleOpen(row) {
      if (row && row.id) {
        this.sblId = row.id
        this.initTable()
        this.dialogVisible = true
      }
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    initTable() {
      getActionHisList({ sblId: this.sblId, ...this.listQuery }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    onChangePage(page) {
      this.listQuery = page
      this.initTable()
    }
  }
}
</script>
